﻿@model PaginationList<Album> 

@{
    ViewBag.Title = Resources.Music;
    Layout = "~/Views/Shared/_AlbumLayout.cshtml";
}
<aside class="sidebar clearfix">
    <nav class="primary clearfix">
		<ul>
			<li>@Html.NavigationLink(Resources.AlbumAll, "HomeList", "Album", new { }, new { @datafilter = "*", @class = "selected" })</li>

            @foreach (iHouse.Model.Data.Category item in ViewBag.TypeCategories)
            {
                <li>
                    @Html.NavigationLink(item.Name, "HomeList", "Album", new { category = item.ID }, new { @datafilter = "." + item.Name.ToLower() })
                </li>
            }  
		</ul>
	</nav>
</aside>
<div class="page">
    <section class="main clearfix">			
	    <div class="portfolio">	
        @foreach (iHouse.Model.Data.Album album in this.Model)
        {			
			<article class="entry @album.Category.Name.ToLower()">
                <figure>
				    <a class="cd-cover" href="#">
                    @if (!string.IsNullOrEmpty(album.ImagePath))
                    {
                        @Html.Image(album.ImagePath, new { @class = "" })
                    }
                    else
                    {
                        <span class="uploading">Image Uploading</span>;
                    }
                    </a>
				    <span class="hover"></span>
                </figure>
                <header>
                    <h3 class="post-title">@album.Name</h3>
                </header>
                <footer class="meta">
                    <p>@Resources.AlbumDetailReleaseDate : @album.PublishDate.Value.ToShortDateString() | @album.Singer</p>
                </footer>
			</article>
        }			
		</div>
    
        <div class="pagination-wrapper">
            @{ViewData["prevclass"] = "prev";
              ViewData["currentclass"] = "current";
              ViewData["nextclass"] = "next";
              ViewData["container"] = "pagination";
              }
            @Html.Partial("Pagination", Model, ViewData)     
         </div>
     </section>
</div>
<script type="text/javascript">
    Sys.require(["isotope"], function () {

        if ($('input[name=search]').val() != '') {
            return;
        }

        var $container = $('.portfolio');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('nav.primary ul a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });

        var $optionSets = $('nav.primary ul'),
	       $optionLinks = $optionSets.find('a');

        $optionLinks.click(function () {
            var $this = $(this);
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }
            var $optionSet = $this.parents('nav.primary ul');
            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');
        });

    });

</script>


